<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		<div id="imgbox">
			<a href="#">
				<img src="img/prapic5.jpg" >
			</a>
			<div class="choosebox">
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
				<div class="item"></div>
			</div>
			<a href="#">
				<div class="lefticon">
					<
				</div>
			</a>
			<a href="#">
				<div class="righticon">
					>
				</div>
			</a>
		</div>
	</body>
</html>
<script type="text/javascript">
	var img = document.getElementsByTagName("img")[0];
	var chooselist = document.getElementsByClassName("item")
	var lefticon = document.getElementsByClassName("lefticon")[0];
	var righticon = document.getElementsByClassName("righticon")[0];
	var imglist = ["img/prapic5.jpg","img/prapic6.jpg","img/prapic7.jpg","img/prapic8.jpg","img/prapic9.jpg","img/prapic10.jpg","img/prapic11.jpg","img/prapic12.jpg"]
	var temp = 0;
	var timer;
	timer = setInterval(function(){
		img.src = imglist[temp]
		temp++;
		if(temp >= imglist.length)
			temp-=imglist.length;
	},3000)
	for(let i = 0;i<imglist.length;i++){
		chooselist[i].onmouseenter = function(e){
			// 停止计时器
			clearInterval(timer);
			img.src = imglist[i];
			// 重启计时器
			timer = setInterval(function(){
				img.src = imglist[temp]
				temp++;
				if(temp == imglist.length)
					temp-=imglist.length;
			},3000)
		}
	}
	lefticon.onclick = function(){
		temp--;
		if(temp < 0)
			temp+=imglist.length;
		img.src = imglist[temp]
	}
	righticon.onclick = function(){
		temp++;
		if(temp == imglist.length)
			temp-=imglist.length;
		img.src = imglist[temp]
	}
	
</script>
<style type="text/css">
	#imgbox{
		width: 590px;
		height: 470px;
		border: 1px solid;
		position: relative;
	}
	.choosebox{
		height: 15px;
		/* border: 1px solid; */
		position: absolute;
		left:30px;
		bottom:20px;
	}
	.item{
		width: 8px;
		height: 8px;
		border: 1px solid transparent;
		margin-right: 4px;
		background-color: rgba(256,256,256,0.3);
		border-radius: 50%;
		display: inline-block;
	}
	.item:hover{
		background-color: rgba(256,256,256,1);
		border: 3px solid rgba(196,196,196,0.5);
		margin-right: 0px;
	}
	.lefticon{
		width: 25px;
		height: 35px;
		background-color: rgba(0,0,0,0.1);
		line-height: 35px;
		font-weight: 1000;
		color: #fff;
		font-size: 12px;
		border-top-right-radius: 17.5px;
		border-bottom-right-radius: 17.5px;
		position: absolute;
		top: 218px;
		text-align: left;
	}
	.lefticon:hover,.righticon:hover{
		background-color: rgba(0,0,0,0.6);
	}
	.righticon{
		width: 25px;
		height: 35px;
		background-color: rgba(0,0,0,0.1);
		line-height: 35px;
		font-weight: 1000;
		color: #fff;
		font-size: 12px;
		border-top-left-radius: 17.5px;
		border-bottom-left-radius: 17.5px;
		position: absolute;
		top: 218px;
		right: 0;
		text-align: right;
	}
</style>